import React, {FC, useCallback, useMemo, useRef} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import service from './service';
import {SysModuleModel} from './data';
import Details from './components/Details';
import Edit from './components/Edit';
import ProTableCrud, {OptionColumnPosition, ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import useDelete from '@/hooks/useDelete';
import {Button, Input, Space, Switch} from "antd";
import {checkedFaColumnRender, getStatusEnum} from "@/utils/utils";
import styles from "@/utils/utils.less";
import XtraModal, {XtraModalMethods} from "@/lib/XtraModal";
import XtraTree from "@/lib/XtraTree";
import useDialog from "@/hooks/useDialog";

/** 系统模块模块 */
const SysModulePage: FC = () => {
  const editOperate = useDialog();
  const detailsOperate = useDialog();
  const dragModal = useRef<XtraModalMethods>(null);

  //List
  const listOperate = useList<SysModuleModel>({
    onLoad: service.selectTreeList,
    onExport: service.export,
  });
  //Delete
  const deleteOperate = useDelete<SysModuleModel>({
    onDelete: (ids, _) => service.delete(ids.join()),
    onDeleteSucess: listOperate.handleReload,
  });

  const searchOptionRender = useCallback(({searchText, resetText}, {form}) => {
    return (
      <Space>
        <Button type="primary" htmlType="submit" onClick={() => form.submit()}>
          <i className='fal fa-search'/> {searchText}
        </Button>
        <Button onClick={listOperate.handleExport}>
          <i className="fal fa-file-export"/> 导出
        </Button>
      </Space>
    );
  }, [listOperate]);

  //模块拖拽窗口[确定]按钮回调函数
  const onDragModalOk = useCallback(() => {
    dragModal.current?.hide();
    listOperate.handleReload();
  }, []);

  const newRecord = useCallback((newModel: {}) => {
    editOperate.show({
      created: true,
      onSubmitSucess: listOperate.handleReload,
      newModel
    });
  }, []);

  //表格列
  const cols = useMemo(() => getCols(listOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysModuleModel> = {
    cols,
    listOperate,
    deleteOperate,
    editOperate,
    detailsOperate,
    optionColumnWidth: 160,
    optionColumnPosition: OptionColumnPosition.Right,
    getColumnComandItems: (_, r) => ['details', (
      <a key="cmd-create" onClick={() => newRecord({parentId: r.id, web: true, win: false, menu: true, status: true})}>新建</a>
    ), 'edit', 'delete'],
    getToolbarItems: () => [(
      <Button onClick={() => {
        newRecord({web: true, win: false, menu: true, status: true})
      }}>
        <i className="fal fa-bars"/>
        新建菜单
      </Button>
    ), (
      <Button onClick={() => {
        newRecord({web: false, win: false, menu: false, status: true})
      }}>
        <i className="fal fa-lock-alt"/>
        新建权限
      </Button>
    ), (
      <Button onClick={() => {
        //setDragVisable(v=>!v);
        dragModal.current?.show();
      }}>
        <i className="fal fa-chart-network"/>
        拖拽
      </Button>
    ), 'delete'],
    getEditElement: (props) => (<Edit {...props}/>),
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <>
      <ProTableCrud
        headerTitle="系统模块列表"
        scroll={{x: 1200}}
        search={{optionRender: searchOptionRender,}}
        pagination={false}
        rowClassName={(record, _) => record.status ? '' : styles.tableRowRed}
        // expandable={{expandedRowKeys: expandKeys, onExpand}}
        operate={tableOperate}
      />
      <XtraModal ref={dragModal} title="模块拖拽" onOk={onDragModalOk} cancelButtonVisible={false}>
        <XtraTree onLoadTreeData={service.selectTreeList} onSaveDndNodes={service.updateDnd}/>
      </XtraModal>
    </>
  );
};

/** 获取表格列 */
function getCols(listOperate: ListOperate<SysModuleModel>): (ProColumns<SysModuleModel>[]) {
  return [
    {
      title: '关键字',
      key: 'name',
      hideInTable: true,
      renderFormItem: (item, {type, defaultRender, ...rest}) => {
        return (<Input {...rest} placeholder="请输入模块编码/名称/简拼查询"/>)
      },
    },
    {
      title: '模块名称',
      dataIndex: 'name',
      hideInSearch: true,
      ellipsis: true,
      render: (_, r) => {
        return (
          <>
            <i className={r.menu ? r.webCls : 'icon-settings'} style={{marginRight: 3}}/>
            {r.name}
          </>
        );
      },
    },
    {
      title: '模块编码',
      dataIndex: 'code',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 50,
      filters: undefined,
      valueEnum: getStatusEnum(),
      initialValue: 'null',
      formItemProps: {
        'onSelect': listOperate.handleSearch
      },
      render: (_, r) => (
        <Switch key={r.id}
                size={"small"}
                checked={r.status}
                onClick={() => {
                  service.updateStatus(r.id, !r.status).then(() => {
                    listOperate.handleReload();
                  });
                }}
        />
      ),
    },
    {
      title: '展开',
      dataIndex: 'expand',
      width: 50,
      hideInSearch: true,
      align: 'center',
      render: (_, r) => (
        <Switch key={r.id}
                size={"small"}
                checked={r.expand}
                onClick={() => {
                  service.updateExpandStatus(r.id, !r.expand).then(() => {
                    listOperate.handleReload();
                  });
                }}
        />
      ),
    },
    {
      title: '公共',
      dataIndex: 'publiced',
      width: 50,
      hideInSearch: true,
      align: 'center',
      render: (_, r) => checkedFaColumnRender(r.publiced),
    },
    {
      title: '菜单',
      dataIndex: 'menu',
      width: 50,
      hideInSearch: true,
      align: 'center',
      render: (_, r) => checkedFaColumnRender(r.menu),
    },
    {
      title: 'Web',
      dataIndex: 'web',
      width: 50,
      hideInSearch: true,
      align: 'center',
      render: (_, r) => checkedFaColumnRender(r.web),
    },
    {
      title: 'Web路径',
      dataIndex: 'webUrl',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: 'Win',
      dataIndex: 'win',
      width: 50,
      hideInTable: false,
      hideInSearch: true,
      align: 'center',
      render: (_, r) => checkedFaColumnRender(r.win),
    },
    {
      title: 'Win路径',
      dataIndex: 'winUrl',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
    },
  ]
}

export default SysModulePage;
